<template>
  <el-dialog
    class="proList"
    title="成分列表"
    :visible.sync="isShow"
    append-to-body
    @close="closeEve"
    width="800px"
    >
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="multipleTable"
      size='small'
      height='100%'
      @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column prop="name" label="产品名字" width="200" fixed='left' align='center'/>
      <el-table-column prop="type" label="类型" width="180" align='center'>
        <template v-slot="data">
            <div>
              {{data.row.type | typeFilter(medicalType)}}
            </div>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="级别" width="180" align='center'>
        <template v-slot='data'>
          <div>
            {{data.row.level | typeFilter(levelType)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="brand" label="品牌" width="180" align='center'/>
      <el-table-column prop="place" label="产地" width="300" align='center'/>
      <el-table-column prop="price" label="售价" width="180" align='center'/>
      <el-table-column prop="remark" label="备注" width="300" :show-overflow-tooltip='true' align='center'/>
    </el-table>
    <el-pagination
      class="fenye"
      :page-sizes="[20,50,100,150]"
      :page-size="query.size"
      small
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page='query.page'
      @size-change='sizeChange'
      @current-change='currentChange'>
    </el-pagination>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeEve">取 消</el-button>
        <el-button type="primary" @click="cc">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script> 
import { productListApi,dictListApi,productApproveApi } from '../../../apis/productApi'
export default {
  props: {
    value:{
      required: true,
      type: Boolean
    }
  },
  data() {
    return {
      isShow: null,
      tableData: [],
      total:0,
      query:{
        page:1,
        size:20,
      },
      changeTimer:null,
      medicalType:[],
      levelType:[],
      proList:[],
      loading: true
    }
  },
  mounted() {
    Promise.all(
      [
        dictListApi('MEDICAL'),
        dictListApi('PRODUCT_LEVEL')
      ]).then(d=> {
        if(d[0].code===200) this.medicalType = d[0].data.rows
        if(d[1].code===200) this.levelType = d[1].data.rows
      })
    this.getList()
  },
  methods: {
    closeEve(){
      this.isShow = false
    },
    async getList(){
      this.loading = true
      let result = await productListApi(this.query)
      if(result.code === 200 ){
        this.tableData = result.data.rows
        this.total = result.data.count


        setTimeout(()=> {
          if(!!this.$refs.multipleTable) {
            this.proList.forEach(it => {
              let row = this.tableData.find(cc => cc.id === it.id)
              if(!!row) this.$refs.multipleTable.toggleRowSelection(row,true)
            })
          }

          setTimeout(()=> {
            this.loading = false
          },100)
        })
      }
    },
    sizeChange(size){
      this.query.size = size
      if(this.changeTimer) clearTimeout(this.changeTimer)
      this.changeTimer = setTimeout(() => {
        this.getList()
      })
      console.log(this.query.page,this.query.size)
      },
    currentChange(page){
      this.query.page = page
      if(this.changeTimer) clearTimeout(this.changeTimer)
      this.changeTimer = setTimeout(() => {
        this.getList()
      })
      console.log(this.query.page,this.query.size)
    },
    closeEve(){
      this.$emit('input', false)
    },
    handleSelectionChange(val){
      if(!this.loading) {
        console.log('123124124141',this.loading)
        this.tableData.forEach(it => {
          let has = this.proList.findIndex(i => i.id == it.id)
          if(has > -1) this.proList.splice(has,1)
        })
        this.proList = this.proList.concat(val)
      }
    },
    cc(){
      this.$emit('cj',this.proList)
      this.$emit('input',false)
    }
  },
  watch:{
    value(val) {
      this.isShow = val
    }
  }
}
</script>
<style lang="less" scoped>
</style>